<template>
  <div class="main-box">
    <div :class="['container', 'container-register', { 'is-txl': isLogin }]">
      <form>
        <h2 class="title">Create Account</h2>
        <span class="text">or use email for registration</span>
        <input
          class="form__input"
          v-model="smallname"
          type="text"
          id="smallname"
          name="smallname"
          placeholder="请输入3-12位的用户名" />
        <!-- 输入密码 -->
        <input
          class="form__input"
          v-model="password1"
          type="password"
          id="password1"
          name="password"
          placeholder="Password" />
        <!-- 再次输入密码 -->
        <input
          class="form__input"
          v-model="password2"
          type="password"
          id="password2"
          name="password"
          placeholder="Enter Password Again" />
        <!-- 姓名 -->
        <input
          class="form__input"
          type="text"
          placeholder="请输入2-6位的姓名"
          v-model="nameA"
          id="nameA" />
        <!-- 性别 -->
        <!-- <input
          class="form__input"
          v-model="sex"
          type="text"
          id="sex"
          name="sex"
          placeholder="sex"
          value="" /> -->
        <div class="form__input">
          <span class="bbb">请选择性别：</span>
          <el-radio-group v-model="sex">
            <el-radio :label="1" border>男</el-radio>
            <el-radio :label="2" border>女</el-radio>
          </el-radio-group>
        </div>
        <!-- <el-select  class="form__input" v-model="sex" placeholder="请选择活动区域">
          <el-option label="男"  value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select> -->

        <!-- 手机号@blur="checkNum()" -->
        <input
          class="form__input"
          v-model="mobile"
          type="text"
          id="mobile"
          name="mobile"
          placeholder="Mobile phone number" />
        <!-- 验证码 -->
        <div>
          <input
            class="form__input1"
            v-model="number"
            type="text"
            id="number"
            name="number"
            placeholder="verification code" />
          <el-button v-if="codeShow" class="aaa" @click="getPhoneCode" round
            >获取验证码</el-button
          >
          <el-button v-if="!codeShow" class="aaa" round
            >{{ count }}秒后重试</el-button
          >
        </div>
        <div class="primary-btn" @click="login">立即注册</div>
      </form>
    </div>
    <div
      :class="[
        'container',
        'container-login',
        { 'is-txl is-z200': isLogin },
      ]">
      <form>
        <h2 class="title">Sign in to Website</h2>
        <span class="text">or use email for registration</span>
        <input
          class="form__input"
          v-model="userName"
          type="text"
          id="userName"
          name="userName"
          placeholder="mobile and mobile" />
        <input
          class="form__input"
          v-model="passWord"
          type="password"
          id="password"
          name="passWord"
          placeholder="Password" />
        <div class="primary-btn" @click="logon">立即登录</div>
      </form>
    </div>
    <div :class="['switch', { login: isLogin }]">
      <div class="switch__circle"></div>
      <div class="switch__circle switch__circle_top"></div>
      <div class="switch__container">
        <h2>{{ isLogin ? "Hello Friend !" : "Welcome Back !" }}</h2>
        <p>
          {{
            isLogin
              ? "Enter your personal details and start journey with us"
              : "To keep connected with us please login with your personal info"
          }}
        </p>
        <div class="primary-btn" @click="isLogin = !isLogin">
          {{ isLogin ? "立即注册" : "立即登录" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginBox",
  data() {
    //手机号
    var checkPhone = (value, callback) => {
      // 匹配手机号
      let res = /^[1][3,4,5,6.7,8,9][0-9]{9}$/;

      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!res.test(value)) {
        callback(new Error("手机号格式不对"));
      } else {
        callback();
      }
    };
    return {
      isLogin: true,
      // loginForm: {
      //   email: "",
      //   password: "",
      // },
      // registerForm: {
      //   name: "",
      //   email: "",
      //   password: "",
      // },
      //365-
      userName: "", //登陆账号
      passWord: "", //登录密码
      //181-360 注册
      mobile: "", //手机号
      password1: "", //密码
      password2: "", //确认密码
      nameA: "", //用户名
      smallname: "", //账号
      sex: "", //性别
      number: "", //验证码
      count: "", //计时器
      codeShow: true, //验证码判
      timer: null, //计时器
    };
  },

  methods: {
    // login() {},
    // register() {},

    // // 失焦验证
    // checkNum() {
    //   let _this = this;
    //   //失去焦点判断手机号是否存在
    //   if (
    //     !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
    //       this.mobile
    //     )
    //   ) {
    //     _this.open3();
    //   } else {
    //     this.$http
    //       .post("/tuser/createCode?mobile=" + this.mobile)
    //       .then(function (response) {
    //         if (response.data.code == 200) {
    //           _this.open1();
    //         } else {
    //           _this.open2();
    //         }
    //       })
    //       .catch(function (error) {});
    //   }
    // },
    // open1() {
    //   this.$message({
    //     message: "恭喜你，该手机号可以使用，请获取验证码",
    //     type: "success",
    //   });
    // },
    // open2() {
    //   this.$message.error("手机号已存在,请重新输入");
    //   return;
    // },
    // open3() {
    //   this.$message.error("请填写正确手机号");
    //   return;
    // },
    // 验证码发送
    getPhoneCode() {
      var _this = this;
      if (
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.mobile
        )
      ) {
        this.$http
          .post("/tuser/createCode?mobile=" + this.mobile)
          .then(function (response) {
            if (response.data.code == 200) {
              //计时
              const TIME_COUNT = 60;
              _this.$message({
                type: "success",
                message: "验证码已发送!",
              });
              if (!_this.timer) {
                _this.count = TIME_COUNT;
                _this.codeShow = false;
                _this.timer = setInterval(() => {
                  if (_this.count > 0 && _this.count <= TIME_COUNT) {
                    _this.count--;
                  } else {
                    _this.codeShow = true;
                    clearInterval(_this.timer);
                    _this.timer = null;
                  }
                }, 1000);
              }
            } else {
              _this.$message.error("未生成");
            }
          });
      } else {
        this.$message.error("手机号错误,验证码无法生成");
      }
    },
    // 注册
    login() {
      var _this = this;
      console.log("注册。。。。。。。。。。。。");
      if (this.smallname == "") {
        _this.$message.error("用户名不可以为空");
        return;
      } else if (this.smallname.length > 12 || this.smallname.length < 3) {
        _this.$message.error("请输入3-12位的用户名");
        return;
      } else if (this.password1 == "") {
        _this.$message.error("密码不可以为空");
        return;
      } else if (this.password2 == "") {
        _this.$message.error("请再次输入密码");
        return;
      } else if (this.password1 != this.password2) {
        _this.$message.error("两次密码需保持一致！");
        return;
      } else if (this.nameA == "") {
        _this.$message.error("姓名不可以为空");
        return;
      } else if (this.nameA.length > 6 || this.nameA.length < 2) {
        _this.$message.error("请输入2-6位的姓名");
        return;
      } else if (this.sex == "") {
        _this.$message.error("性别不可以为空");
        return;
      } else if (this.mobile == "") {
        _this.$message.error("手机号不能为空");
        return;
      } else if (this.number == "") {
        _this.$message.error("验证码不能为空");
        return;
      }
      //用户注册
      this.$http
        .post("/tuser/yanzhen?number=" + this.number)
        .then(function (response) {
          if (response.data.code == 200 && response.data.data == 200) {
            console.log(response);
            _this.addAAA();
          } else {
            _this.$message.error("验证码错误");
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error("验证码错误。。。");
        });
    },
    //刷新
    refresh() {
      //原始js重新请求
      location.reload();
    },
    // 将注册信息存入数据库
    addAAA() {
      var _this = this;
      this.$http
        .post("/tuser/add", {
          mobile: this.mobile,
          name: this.nameA,
          password: this.password2,
          sex: this.sex,
          smallname: this.smallname,
        })
        .then(function (response) {
          if (response.data.code == 200) {
            // location.href = "http://localhost:8080/#/";
            _this.refresh();
            _this.isLogin = true;
          } else {
            _this.$message.error("用户名或者密码错误");
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error("你错了。。。");
        });
    },

    //登录
    logon() {
      var _this = this;
      console.log("登录。。。。。。。。。。。。");
      if (this.userName == "") {
        _this.$message.error("账号不能为空！");
        return;
      } else if (this.passWord == "") {
        _this.$message.error("密码不能为空！");
        return;
      }
      //用户登录
      this.$http
        .get(
          "/TuserA/login?mobile=" +
            this.userName +
            "&password=" +
            this.passWord
        )
        .then(function (response) {
          if (response.data.code == 200) {
            alert("登录成功");
          } else {
            _this.$message.error("账号或者密码错误");
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error("你错了。。。");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.main-box {
  position: relative;
  width: 1000px;
  margin-left: 21%;
  margin-top: 6%;
  min-width: 1000px;
  min-height: 600px;
  height: 600px;
  padding: 25px;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 600px;
    height: 100%;
    padding: 25px;
    background-color: #ecf0f3;
    transition: all 1.25s;
    form {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      color: #a0a5a8;
      .title {
        font-size: 33px;
        font-weight: 700;
        line-height: 1;
        color: #181818;
      }
      .text {
        margin-top: 30px;
        margin-bottom: 12px;
      }

      .form__input {
        width: 350px;
        height: 40px;
        margin: 4px 0;
        padding-left: 25px;
        font-size: 13px;
        letter-spacing: 0.15px;
        border: none;
        outline: none;
        // font-family: 'Montserrat', sans-serif;
        background-color: #ecf0f3;
        transition: 0.25s ease;
        border-radius: 8px;
        box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
        &::placeholder {
          color: #a0a5a8;
        }
      }
    }
  }
  .container-register {
    z-index: 100;
    left: calc(100% - 600px);
  }
  .container-login {
    left: calc(100% - 600px);
    z-index: 0;
  }
  .is-txl {
    left: 0;
    transition: 1.25s;
    transform-origin: right;
  }
  .is-z200 {
    z-index: 200;
    transition: 1.25s;
  }
  .switch {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 400px;
    padding: 50px;
    z-index: 200;
    transition: 1.25s;
    background-color: #ecf0f3;
    overflow: hidden;
    box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
    color: #a0a5a8;
    .switch__circle {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background-color: #ecf0f3;
      box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
      bottom: -60%;
      left: -60%;
      transition: 1.25s;
    }
    .switch__circle_top {
      top: -30%;
      left: 60%;
      width: 300px;
      height: 300px;
    }
    .switch__container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: absolute;
      width: 400px;
      padding: 50px 55px;
      transition: 1.25s;
      h2 {
        font-size: 34px;
        font-weight: 700;
        line-height: 3;
        color: #181818;
      }
      p {
        font-size: 14px;
        letter-spacing: 0.25px;
        text-align: center;
        line-height: 1.6;
      }
    }
  }
  .login {
    left: calc(100% - 400px);
    .switch__circle {
      left: 0;
    }
  }
  .primary-btn {
    width: 180px;
    height: 48px;
    border-radius: 25px;
    margin-top: 36px;
    text-align: center;
    line-height: 48px;
    font-size: 14px;
    letter-spacing: 2px;
    background-color: #4b70e2;
    color: #f9f9f9;
    cursor: pointer;
    box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
    &:hover {
      box-shadow: 4px 4px 6px 0 rgb(255 255 255 / 50%),
        -4px -4px 6px 0 rgb(116 125 136 / 50%),
        inset -4px -4px 6px 0 rgb(255 255 255 / 20%),
        inset 4px 4px 6px 0 rgb(0 0 0 / 40%);
    }
  }
}
.form__input1 {
  width: 120px;
  height: 40px;
  margin: 4px 0;
  padding-left: 25px;
  font-size: 13px;
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  // font-family: 'Montserrat', sans-serif;
  background-color: #ecf0f3;
  transition: 0.25s ease;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
  &::placeholder {
    color: #a0a5a8;
  }
}
#sex1 {
  height: 40px;
  margin: 4px 0;
  padding-left: 25px;
  font-size: 13px;
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  transition: 0.25s ease;
  border-radius: 8px;
}
.bbb {
  margin-left: -63px;
  margin-right: 30px;
}
.aaa {
  color: #a0a5a8;
  margin-right: 68px;
  background-color: #ecf0f3;
  margin-left: 43px;
  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
  &:hover {
    box-shadow: 4px 4px 6px 0 rgb(255 255 255 / 50%),
      -4px -4px 6px 0 rgb(116 125 136 / 50%),
      inset -4px -4px 6px 0 rgb(255 255 255 / 20%),
      inset 4px 4px 6px 0 rgb(0 0 0 / 40%);
  }
}
</style>
